<template>
  <div class="nav-bar">
    <van-nav-bar :left-text="title">
      <template #right>
        <van-icon
          :name="icon1"
          class="icon_1"
          size="24"
          color="#000"
          @click="handleJumpSearch"
        />
        <van-icon :name="icon2" size="24" color="#000" @click="showPopup">
          <van-popup
            v-model="show"
            position="right"
            closeable
            @click="showPopup"
          >
            <div class="filtertitle">筛选日程</div>
            <div class="tagbox">
              <span class="tagtitle">日程类型</span>
              <div class="tag">
                <van-tag
                  v-for="(value, index) in taglist1"
                  :key="index"
                  type="primary"
                  size="large"
                  color="#f9f9f9"
                  text-color="#333"
                  :class="{ active: isActive === index }"
                  @click="change(index)"
                >
                  {{ value }}
                </van-tag>
              </div>
            </div>
            <div class="tagbox">
              <span class="tagtitle">日程状态</span>
              <div class="tag">
                <van-tag
                  v-for="(value, index) in taglist2"
                  :key="index"
                  type="primary"
                  size="large"
                  color="#f9f9f9"
                  text-color="#333"
                  :class="{ active: isActive2 === index }"
                  @click="change2(index)"
                >
                  {{ value }}
                </van-tag>
              </div>
            </div>
          </van-popup>
        </van-icon>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: "Navbar",
  data() {
    return {
      show: false,
      taglist1: ["全部", "个人待办", "招聘", "审批", "考勤", "绩效"],
      taglist2: ["全部", "进行中", "我发起的", "我参与的", "已完成"],
      isActive: "",
      isActive2: "",
    };
  },
  computed: {
    title() {
      return this.$route.meta.title || "办公";
    },
    icon1() {
      return this.$route.meta.icon1 || "功能图标1";
    },
    icon2() {
      return this.$route.meta.icon2 || "功能图标2";
    },
  },
  methods: {
    showPopup() {
      if (this.$route.path == "/schedule") {
        this.show = !this.show;
      }
    },
    change(index) {
      this.isActive = index;
    },
    change2(index) {
      this.isActive2 = index;
    },
    handleJumpSearch() {
      this.$router.push("/search");
    },
  },
};
</script>

<style lang="less">
.van-nav-bar__left {
  font-size: 22px !important;
}
.van-nav-bar__text {
  color: #000 !important;
}
.icon_1 {
  margin-right: 20px;
}
.van-dialog {
  padding: 10px;
}
.van-dialog__header {
  text-align: left !important;
}
.tagbox {
  width: 100%;
  min-height: 100px;
  margin-top: 20px;
  .tagtitle {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #999;
    text-align: left;
  }
  .tag {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .van-tag--large {
      display: inline-block;
      width: 70px;
      margin-bottom: 10px;
    }
    .active {
      border: 1px solid rgb(158, 174, 243);
    }
  }
}
.van-popup--right {
  width: 78%;
  height: 100%;
  padding: 10px;
}
.filtertitle {
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
  margin-top: 30px;
}
</style>
